<template>
  <div>
    <Navs @loginSwitch="loginSwitch"></Navs>

    <div class="body" @click="closeRemark">
      <!-- 1  版心width=960px -->
      <div class="content">
        <Aside :review="review"></Aside>
        <!-- 2  文章部分（版心的左半部分 width=700px） -->
        <div class="article">
          <!-- 3  文章部分中的个人信息 -->
          <div class="article-nav">
            <div class="article-nav-headpic">
              <img
                :src="'http://api_devss.wanxikeji.cn/' + this.data.icon"
                @click="turnPerson2(data.user_id)"
              />
            </div>
            <div class="article-nav-title">
              <p>{{ data.nick_name }}</p>
              <span
                >{{ article_createdTime
                }}<span style="margin-left: 20px"
                  >阅读量：{{ data.pv }}</span
                ></span
              >
            </div>
            <button
              v-if="!isFollow"
              class="article-nav-button article-nav-isFollow-false"
              @click="follow"
            >
              关注
            </button>
            <button
              v-if="isFollow"
              class="article-nav-button article-nav-isFollow-true"
              @click="follow"
            >
              已关注
            </button>
          </div>
          <!-- 3  文章部分中的文章内容 -->
          <div class="article-content">
            <div v-if="data.title != ''" class="article-content-title">
              {{ data.title }}
            </div>
            <div class="article-content-info">
              {{ data_info.content }}
            </div>
            <div
              v-for="(item, index) in data_info.imgs"
              :key="index"
              class="article-content-pic"
            >
              <img
                :src="'http://api_devss.wanxikeji.cn/' + item"
                style="width: 100%"
              />
            </div>
          </div>
          <!-- 3  文章部分中的评论 -->
          <div class="article-remark" id="comment">
            <!-- 3-1 写评论 -->
            <div class="remark-input">
              <div class="remark-input-headpic">
                <img :src="myIcon" />
              </div>
              <div @click.stop="showRemark">
                <input
                  type="text"
                  placeholder="输入评论..."
                  v-model="fatherInput"
                />
                <button
                  v-if="isFocus"
                  class="remark-input-button"
                  :class="[
                    isfatherHigh
                      ? 'remark-input-button1'
                      : 'remark-input-button2',
                  ]"
                  @click.stop="remarkCheck"
                  :disabled="isRemark"
                >
                  评论
                </button>
              </div>
            </div>
            <!-- 3-2 看评论 -->
            <div class="remark-comment">
              <div class="remark-comment-list">
                <!-- 一级评论列表 -->
                <div
                  class="list-item"
                  v-for="(item, index) in commintData"
                  :key="index"
                >
                  <!-- 一级评论的头像 -->
                  <div class="item-headpic">
                    <img :src="level1Icon[index]" @click="turnPerson(index)" />
                  </div>
                  <!-- 一级评论的内容 -->
                  <div class="item-content">
                    <p class="item-content-nickName" @click="turnPerson(index)">
                      {{ item.nick_name }}
                    </p>
                    <p class="item-content-info">{{ item.comment_info }}</p>
                    <div style="margin-bottom: 10px">
                      <p class="item-content-time">{{ commintTime[index] }}</p>
                      <p
                        class="item-content-remark iconfont"
                        @click.stop="childRemarkShow(index)"
                      >
                        &#xe684;<span>回复</span>
                      </p>
                      <p class="item-content-good iconfont">&#xe639;</p>
                    </div>
                    <!-- 二级评论列表 -->
                    <div
                      class="list-item list-secondItem"
                      v-for="(item1, index1) in commintData[index].child"
                      :key="index1"
                    >
                      <div class="item-headpic secondItem-headpic">
                        <img
                          :src="'http://api_devss.wanxikeji.cn/' + item1.icon"
                          @click="turnPerson2(item1.user_id)"
                        />
                      </div>
                      <div class="item-content">
                        <p
                          class="item-content-nickName"
                          @click="turnPerson2(item1.user_id)"
                        >
                          {{ item1.nick_name }}
                        </p>
                        <p class="item-content-info">
                          {{ item1.comment_info }}
                        </p>
                        <div style="margin-bottom: 10px">
                          <p class="item-content-time">
                            {{ commintTime[index] }}
                          </p>
                          <p
                            class="item-content-remark iconfont"
                            @click.stop="childRemarkShow(index)"
                          >
                            &#xe684;<span>回复</span>
                          </p>
                          <p class="item-content-good iconfont">&#xe639;</p>
                        </div>
                      </div>
                    </div>
                    <!-- 二级评论的评论 -->
                    <div
                      v-if="ischildRemark[index]"
                      class="childRemark"
                      @click.stop=""
                    >
                      <input
                        type="text"
                        placeholder="请回复"
                        v-model="childInput"
                      />
                      <button
                        :disabled="ischildCheck"
                        :class="[ischildHigh ? 'childRemark1' : 'childRemark2']"
                        @click="childRemark(index)"
                      >
                        评论
                      </button>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- 2  个人信息部分（版心的右半部分 width=240px） -->
        <div class="info">
          <div class="aboutAuthor">关于作者</div>
          <div class="info-box">
            <div class="box-img">
              <img :src="'http://api_devss.wanxikeji.cn/' + this.data.icon" />
            </div>
            <div class="box-title">
              <p>{{ data.nick_name }}</p>
              <span :title="this.insert">{{ insert }}</span>
            </div>
            <div class="box-like">
              <div class="box-like-iconfont">
                <span class="iconfont">&#xe60c;</span>
              </div>
              <span class="">获得点赞</span>
            </div>
            <div class="box-read">
              <div class="box-like-iconfont">
                <span class="iconfont">&#xe6e1;</span>
              </div>
              <span class="">文章被阅读</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 登录组件 -->
    <div class="loginImport" v-show="getVuxToLogin">
      <Login @loginSwitch="loginSwitch"></Login>
    </div>
  </div>
</template>

<script>
import Nav from "../../components/nav.vue";
import Aside from "../aside/aside";
import Login from "../../components/login";
export default {
  data() {
    return {
      isFollow: null, //判断是否关注
      isFocus: false, //判断一级评论的评论按钮是否显示
      isfatherHigh: false, //判断一级评论的评论按钮是否高亮
      fatherInput: "", //一级评论的输入框
      isRemark: true, //判断一级评论的评论按钮是否可以点击
      childInput: "", //二级评论的输入框
      ischildCheck: true, //判断二级评论的评论按钮是否可以点击
      ischildHigh: false, //判断二级评论的评论按钮是否高亮
      article_id: 0, //默认的文章的id
      page: 1, //
      size: 4, //
      father_id: 0, //文章的id
      token: "", //登录账号（本人）的token
      insert: "", //文章作者的座右铭
      article_createdTime: "", //文章的创建时间
      data: {}, //文章的数据
      data_info: {}, //文章的内容以及图片
      commintData: [], //评论的数据
      commintTime: [], //评论的时间
      ischildRemark: [], //判断二级评论的评论按钮是否显示
      myIcon: "", //登录账号（本人）的头像
      level1Icon: [], //一级评论的头像
      level2Icon: [], //二级评论的头像
      review: 0, //一级评论总数
    };
  },
  components: {
    Navs: Nav,
    Aside: Aside,
    Login,
  },
  methods: {
    // 登录组件切换
    loginSwitch() {
      this.$store.commit("loginSwitch");
    },
    follow() {
      if (this.$store.state.token == null) {
        alert("您还未登录,请登录");
        return;
      }

      this.isFollow = !this.isFollow;
      if (this.isFollow) {
        this.axios({
          method: "post",
          url: "api/concern",
          data: {
            token: this.token,
            be_concern_user_id: this.data.user_id,
          },
        }).then((res) => {
          console.log(res);
        });
      } else {
        this.axios({
          method: "post",
          url: "api/concernDel",
          data: {
            token: this.token,
            be_concern_user_id: this.data.user_id,
          },
        }).then((res) => {
          console.log(res);
        });
      }
    },
    showRemark() {
      this.isFocus = true;
    },
    closeRemark() {
      this.isFocus = false;

      for (let i = 0; i < this.ischildRemark.length; i++) {
        this.ischildRemark[i] = false;
      }

      this.$forceUpdate();
    },
    remarkCheck() {
      this.axios({
        method: "post",
        url: "api/addComment",
        data: {
          token: this.token,
          comment_info: this.fatherInput,
          article_id: this.data.article_id,
        },
      }).then((res) => {
        console.log(res, "评论成功");
        this.axios({
          method: "post",
          url: "api/articleInfo",
          data: {
            article_id: this.article_id,
          },
        }).then((res) => {
          this.commintData = res.data.data.data;
          this.review++;
          // 获取所有一级评论的头像地址
          for (let i = 0; i < this.commintData.length; i++) {
            this.level1Icon[i] =
              "http://api_devss.wanxikeji.cn/" + this.commintData[i].icon;
            console.log(this.level1Icon[i]);
          }
        });
      });

      this.review++;
      this.isFocus = false;
      this.fatherInput = "";
      this.$forceUpdate();
    },
    childRemarkShow(index) {
      this.childInput = "";
      if (this.ischildRemark[index] == true) {
        this.ischildRemark[index] = false;
      } else {
        for (let i = 0; i < this.ischildRemark.length; i++) {
          this.ischildRemark[i] = false;
        }
        this.ischildRemark[index] = true;
      }
      this.$forceUpdate();
    },
    childRemark(index) {
      this.axios({
        method: "post",
        url: "api/addComment",
        data: {
          token: this.token,
          comment_info: this.childInput,
          article_id: this.data.article_id,
          father_id: this.commintData[index].comment_id,
        },
      }).then(() => {
        this.axios({
          method: "post",
          url: "api/articleInfo",
          data: {
            article_id: this.article_id,
          },
        }).then((res) => {
          this.commintData = res.data.data.data;
        });
      });

      // 关闭所有二级评论的窗口
      for (let i = 0; i < this.ischildRemark.length; i++) {
        this.ischildRemark[i] = false;
      }

      // 二级评论框清空
      this.childInput = "";

      this.$forceUpdate();
    },
    turnPerson(index) {
      let user_id = this.commintData[index].user_id;
      this.$router.push({ path: `/user/${user_id}` });
    },
    turnPerson2(user_id) {
      this.$router.push({ path: `/user/${user_id}` });
    },
  },
  watch: {
    fatherInput(value) {
      if (value == "") {
        this.isRemark = true;
        this.isfatherHigh = false;
      } else {
        this.isRemark = false;
        this.isfatherHigh = true;
      }
    },
    childInput(value) {
      if (value == "") {
        this.ischildCheck = true;
        this.ischildHigh = false;
      } else {
        this.ischildCheck = false;
        this.ischildHigh = true;
      }
    },
  },
  mounted() {
    // 获取主页传过来的article_id
    this.article_id = this.$route.params.id;

    // 获取登录后存在vuex中的token
    this.token = this.$store.state.token;

    // 获取登录后存在vuex中的icon
    this.myIcon = "http://api_devss.wanxikeji.cn/" + this.$store.state.icon;

    this.axios({
      method: "post",
      url: "api/userAllInfo",
      data: {
        token: this.token,
      },
    }).then((res) => {
      console.log(res, 888);
    });

    // 获取帖子列表
    this.axios({
      method: "post",
      url: "api/articleList",
      data: {
        page: 1,
        size: 100,
        type: 1,
      },
    }).then((res) => {
      // let i = 3
      console.log(res, "获取帖子列表");
      // 将帖子存入data中
      for (let i = 0; i < res.data.data.data.length; i++) {
        if (res.data.data.data[i].article_id == this.article_id) {
          // 存数据
          this.data = res.data.data.data[i];

          // 就拿到的article中的info 从"字符串"格式转化为"json"格式
          this.data_info = JSON.parse(this.data.info);

          // 创建时间
          let time = res.data.data.data[i].created_at;
          let year = new Date(time).getFullYear();
          let month = new Date(time).getMonth() + 1;
          month = "0" + month;
          month = month.substr(-2);
          let day = new Date(time).getDate();
          day = "0" + day;
          day = day.substr(-2);
          this.article_createdTime = `${year}年${month}月${day}日`;

          break;
        }
      }

      // 获取文章评论信息
      this.axios({
        method: "post",
        url: "api/articleInfo",
        data: {
          article_id: this.article_id,
          // page:this.page,
          // size:this.size,
        },
      }).then((res) => {
        console.log(res.data.data.data, "获取文章评论信息");
        // 将所有一级评论存取 commintData
        this.commintData = res.data.data.data;
        this.review = this.commintData.length;

        // 获取所有一级评论的头像地址
        for (let i = 0; i < this.commintData.length; i++) {
          this.level1Icon[i] =
            "http://api_devss.wanxikeji.cn/" + this.commintData[i].icon;
          console.log(this.level1Icon[i]);
        }

        // 获取所有一级评论的评论时间并转换为xxxx-xx-xx xx-xx 格式 最后渲染到页面上
        for (let i = 0; i < this.commintData.length; i++) {
          let time = this.commintData[i].created_at;
          let year = new Date(time).getFullYear();
          let month = new Date(time).getMonth() + 1;
          month = ("0" + month).substr(-2);
          let day = new Date(time).getDate();
          day = ("0" + day).substr(-2);

          let hour = new Date(time).getHours();
          hour = ("0" + hour).substr(-2);
          let minute = new Date(time).getMinutes();
          minute = ("0" + minute).substr(-2);

          this.commintTime[i] = `${year}-${month}-${day} ${hour}:${minute}`;
          this.ischildRemark[i] = false;
        }
      });

      // 获取用户的关注列表
      this.axios({
        method: "post",
        url: "api/concernList",
        data: {
          user_id: this.$store.state.userID,
        },
      }).then((res) => {
        this.isFollow = false;
        for (let i = 0; i < res.data.data.my_concern.length; i++) {
          if (
            res.data.data.my_concern[i].be_concern_user_id == this.data.user_id
          ) {
            this.isFollow = true;
            console.log(this.isFollow);
            break;
          }
        }
      });
    });
  },
  computed: {
    // 获取token
    getVuxToken() {
      return this.$store.state.token;
    },
    // 获取登录状态
    getVuxToLogin() {
      return this.$store.state.toLogin;
    },
  },
};
</script>

<style>
.body {
  width: 100%;
  background-color: rgb(244, 245, 245);
  margin-bottom: 150px;
}
.content {
  width: 960px;
  margin: 20px auto 0;
  overflow: hidden;
}
/* 
		article-------------------------------------------------------------------------------------------------------
	*/
.article {
  width: 700px;
  background-color: white;
  float: left;
}
.article-nav {
  width: 650px;
  height: 40px;
  margin: 25px auto 0;
}
.article-nav-headpic {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  float: left;
  background-color: red;
  overflow: hidden;
  cursor: pointer;
}
.article-nav-headpic img {
  width: 100%;
  height: 100%;
}
.article-nav-title {
  height: 100%;
  float: left;
  margin-left: 10px;
}
.article-nav-title p {
  height: 20px;
  line-height: 15px;
  margin: 0;
  font-weight: bold;
  font-size: 20px;
}
.article-nav-title span {
  height: 20px;
  line-height: 20px;
  font-size: 15px;
  color: rgb(145, 145, 145);
}
.article-nav-button {
  display: block;
  float: right;
  height: 25px;
  width: 55px;
  border: 1px solid rgb(137, 202, 106);
  border-radius: 3px;
  outline: none;
  cursor: pointer;
  margin-top: 7.5px;
}
.article-nav-isFollow-false {
  color: rgb(137, 202, 106);
  background-color: white;
}
.article-nav-isFollow-true {
  color: white;
  background-color: rgb(137, 202, 106);
}
.article-nav-button:hover {
  opacity: 0.6;
}
/* 
		article中的内容部分--------------------------------
	*/
.article-content {
  width: 650px;
  margin: 20px auto;
}
.article-content-title {
  font-size: 30px;
  font-weight: bold;
}
.article-content-info {
  margin: 20px 0;
  font-size: 20px;
  text-indent: 2em;
  letter-spacing: 2px;
}
/*
		article中的评论部分--------------------------------
	*/
.article-remark {
  width: 652px;
  padding-top: 16px;
  border-top: 1px solid rgb(235, 235, 235);
  margin: 0 auto;
}
.remark-input {
  width: 612px;
  /* height: 60px; */
  margin: 0 auto 16px;
  background-color: rgb(250, 251, 252);
  overflow: hidden;
}
.remark-input-headpic {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  overflow: hidden;
  margin: 15px;
  display: inline-block;
  float: left;
  cursor: pointer;
}
.remark-input-headpic img {
  width: 100%;
  height: 100%;
}
.remark-input input {
  width: 532px;
  height: 36px;
  margin: 12px 0;
  border-radius: 5px;
  border: 1px solid rgb(225, 225, 225);
  box-sizing: border-box;
  padding-left: 15px;
  outline: none;
}
.remark-input input:focus {
  border: 1px solid rgb(2, 127, 255);
}
.remark-input-button {
  width: 60px;
  height: 30px;
  border: none;
  border-radius: 2px;
  font-size: 15px;
  outline: none;
  float: right;
  margin: 0 20px 20px 0;
  cursor: pointer;
  color: white;
}
.remark-input-button1 {
  background-color: rgb(2, 127, 255);
}
.remark-input-button2 {
  background-color: rgb(151, 201, 253);
}
.remark-comment {
  width: 612px;
  margin: 0 auto;
}
.remark-comment-list {
  width: 550px;
  float: right;
}
.list-item {
  width: 100%;
  margin-bottom: 16px;
  display: flex;
  box-sizing: border-box;
}
.item-headpic {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  margin-right: 10px;
  cursor: pointer;
}
.item-headpic img {
  width: 100%;
  height: 100%;
}
.item-content {
  width: 518px;
  border-bottom: 1px solid rgb(225, 225, 225);
}
.item-content-nickName {
  font-size: 13px;
  height: 16px;
  line-height: 16px;
  cursor: pointer;
}
.item-content-info {
  font-size: 13px;
  height: 16px;
  line-height: 16px;
  margin: 10px 0;
}
.item-content-time {
  font-size: 13px;
  color: rgb(175, 175, 175);
  display: inline-block;
}
.item-content-good {
  margin-right: 30px;
}
.item-content .iconfont {
  display: inline-block;
  font-size: 17px;
  cursor: pointer;
  float: right;
  color: rgb(175, 175, 175);
}
.item-content .iconfont span {
  font-size: 13px;
  color: rgb(175, 175, 175);
  margin-left: 10px;
}
.item-content .iconfont:hover {
  opacity: 0.7;
}
.childRemark {
  width: 100%;
  background-color: rgb(250, 251, 252);
  margin-bottom: 10px;
  overflow: hidden;
}
.childRemark input {
  width: 95%;
  height: 38px;
  border: 1px solid skyblue;
  border-radius: 5px;
  display: block;
  margin: 15px auto;
  box-sizing: border-box;
  padding-left: 20px;
  outline: none;
}
.childRemark button {
  width: 60px;
  height: 30px;
  font-size: 15px;
  color: white;
  outline: none;
  border: none;
  border-radius: 2px;
  float: right;
  margin-right: 14px;
  margin-bottom: 10px;
}
.childRemark1 {
  background-color: rgb(2, 127, 255);
}
.childRemark2 {
  background-color: rgb(151, 201, 253);
}
.list-secondItem {
  background-color: rgb(250, 251, 252);
  padding-top: 10px;
  margin: 0;
}
.secondItem-headpic {
  margin-left: 10px;
}
/*
		info(发帖者信息)-----------------------------------------------------------------------------------
	*/
.info {
  width: 240px;
  /* height: 100px; */
  background-color: white;
  float: right;
}
.aboutAuthor {
  width: 100%;
  height: 40px;
  line-height: 40px;
  font-size: 15px;
  box-sizing: border-box;
  padding-left: 15px;
  border-bottom: 1px solid rgb(244, 245, 245);
}
.info-box {
  width: 210px;
  margin: 15px auto;
}
.box-img {
  width: 50px;
  height: 50px;
  float: left;
  border-radius: 50%;
  overflow: hidden;
  margin-right: 12px;
}
.box-img img {
  width: 100%;
  height: 100%;
}
.box-title {
  height: 50px;
  margin-bottom: 15px;
}
.box-title p {
  height: 25px;
  line-height: 18px;
  font-weight: bold;
  font-size: 20px;
  margin: 0;
}
.box-title span {
  font-size: 15px;
  color: rgb(145, 145, 145);
  cursor: pointer;
  display: inline-block;
  width: 100px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.box-like {
  width: 100%;
  margin-bottom: 10px;
}
.box-like-iconfont {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background-color: rgb(225, 239, 255);
  float: left;
  margin-right: 15px;
}
.box-like-iconfont .iconfont {
  color: rgb(123, 185, 255);
  text-align: center;
  line-height: 25px;
  padding-left: 5px;
}
.box-read {
  width: 100%;
  margin-bottom: 20px;
}
.loginImport {
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.1);
  z-index: 999;
}
</style>
